<template>
	<div>
		<div class="box">
			<div class="header">
				<ATab
					ref="ATab"
					@change="change"
					v-model="actived"
					:dict="{ list: menus, label: 'name', value: 'com' }"></ATab>
			</div>
			<div class="content">
				<div v-show="actived === 'Details'">
					<Details
						:value="infoData"
						ref="Details"
						state="readonly"
						from="preview"></Details>
				</div>
				<div v-show="actived === 'PayTable'">
					<PayTable :value="infoData" ref="PayTable"></PayTable>
				</div>
				<div v-show="actived === 'PriceSheet'">
					<PriceSheet :value="infoData" ref="PriceSheet"></PriceSheet>
				</div>
				<div v-show="actived === 'Profit'">
					<Profit :value="infoData" ref="Profit"></Profit>
				</div>
			</div>
			<!-- <swiper -->
			<!-- class="swiper" -->
			<!-- @change="changeSwiper" -->
			<!-- :current="activedIndex"> -->
			<!-- <swiper-item> -->
			<!-- <scroll-view scroll-y scroll-x class="scroll"> -->
			<!-- <Details -->
			<!-- :value="infoData" -->
			<!-- ref="Details" -->
			<!-- state="readonly" -->
			<!-- from="preview"></Details> -->
			<!-- </scroll-view> -->
			<!-- </swiper-item> -->
			<!-- <swiper-item> -->
			<!-- <scroll-view scroll-y scroll-x class="scroll"> -->
			<!-- <PayTable :value="infoData" ref="PayTable"></PayTable> -->
			<!-- </scroll-view> -->
			<!-- </swiper-item> -->
			<!-- <swiper-item> -->
			<!-- <scroll-view scroll-y scroll-x class="scroll"> -->
			<!-- <PriceSheet -->
			<!-- :value="infoData" -->
			<!-- ref="PriceSheet"></PriceSheet> -->
			<!-- </scroll-view> -->
			<!-- </swiper-item> -->
			<!-- <swiper-item> -->
			<!-- <scroll-view scroll-y scroll-x class="scroll"> -->
			<!-- <Profit :value="infoData" ref="Profit"></Profit> -->
			<!-- </scroll-view> -->
			<!-- </swiper-item> -->
			<!-- </swiper> -->
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import * as utils from '@/pages/quota/libs/utils.js';
	import Details from '@/pages/quota/apply/add/index.vue';
	import PayTable from '@/pages/quota/apply/preview/coms/payTable/index.vue';
	import PriceSheet from '@/pages/quota/apply/preview/coms/priceSheet/index.vue';
	import Profit from '@/pages/quota/apply/preview/coms/profit/index.vue';
	export default {
		name: '',
		components: { Details, PayTable, PriceSheet, Profit },
		dicts: [],
		props: {},
		inject: [],
		data() {
			return {
				actived: 'Details',
				activedIndex: 0,
				infoData: {},
				menus: [],
			};
		},
		computed: {},
		watch: {},
		filters: {},
		onLoad(options) {
			this.$nextTick(() => {
				this.initMenus();
				this.getDetails(options.id);
			});
		},
		created() {},
		mounted() {},
		methods: {
			change({ index, value }) {
				this.activedIndex = index;
				// if (val === 'Details') {
				// 	this._dataload();
				// }
			},
			changeSwiper(val) {
				let index = val.detail.current;
				this.$refs.ATab.handlerClick(this.menus[index], index);
			},
			initMenus() {
				this.menus.push({
					name: '内部报价详情',
					key: 'first',
					com: 'Details',
				});
				if (this.checkPermi(['quota:apply:detail:payTable'])) {
					this.menus.push({
						name: '租金支付表',
						key: 'second',
						com: 'PayTable',
					});
				}
				if (this.checkPermi(['quota:apply:detail:priceSheet'])) {
					this.menus.push({
						name: '对外报价单',
						key: 'third',
						com: 'PriceSheet',
					});
				}
				if (this.checkPermi(['quota:apply:detail:profit'])) {
					this.menus.push({
						name: '财务利润测算',
						key: 'fourth',
						com: 'Profit',
					});
				}
			},
			getDetails(calcSchemeId) {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
				apis?.Details(calcSchemeId)
					.then(res => {
						if (res.code == 200) {
							let data = res.data;
							data?.productList?.forEach(product => {
								try {
									if (this.notEmpty(product?.calcSnapshoot)) {
										product.calcSnapshoot = JSON.parse(
											product.calcSnapshoot,
										);
									}
								} catch (error) {
									console.warn(error);
								}
							});
							this.infoData = data;
							this._dataload();
						}
					})
					.finally(() => {
						// uni.hideLoading();
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
	}
	.header {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 11;
	}
	.swiper {
		height: calc(100vh - 33px);
	}
	.scroll {
		height: calc(100vh - 33px);
	}
</style>
